AI 도구 개발

Vibe Audit_03_UI 개선

작성자 : Heehyeon Yoo|2026-02-14
# Project# DevLog# VibeCoding# React# UX

GitHub: Vibe-Audit

돌아가는 것과 쓸만한 것은 다르다

파이프라인이 돌아간다고 끝이 아니다.
첫 테스트에서 확인한 건 "핵심 로직은 동작한다"는 것뿐이었고 실제로 쓰려면 UI가 문제였다.

처음 만든 UI는 솔직히 엔지니어가 디버깅용으로 만든 화면이었다.
정보는 다 보여주는데 뭘 먼저 봐야 하는지 알 수 없는 그런 화면.

alignment score, phase 분류, baseline 정보, context evolution, event log....
한 화면에 다 보여주려고 하니까 오히려 뭘 봐야 하는지 모르겠는 상황이다.

정보 밀도가 높은 요소는 상시 노출 대신 hover나 모달로 전환했다.
항목 디자인을 통일하고 패널 헤더, entries, 접기/펼치기, 간격을 정리했다.
핵심 지표(alignment score + phase)만 한눈에 보이고 나머지는 필요할 때 펼쳐보는 구조로 바꿨다.

설정과 모델 관리

설정 UI의 모델 목록이 실제 지원 모델과 안 맞는 문제도 있었다.
인터페이스 텍스트 언어와 LLM이 생성하는 텍스트 언어가 섞여 보이는 것도 거슬렸다.

모델 카탈로그를 백엔드 기준으로 통합하고 인터페이스 언어와 LLM 응답 언어 정책을 분리했다.
모델 alias 정규화 로직도 추가해서 레거시 입력도 깨지지 않게 처리했다.

DB Manager도 붙였다. SQLite 백업 다운로드/업로드 기능인데 머신 간 세션 이동이나 로컬 히스토리 복구에 쓸 수 있다.

결과

UI까지 손보고 나니까 확실히 도구다운 느낌이 났다.
이전까지는 프로토타입이었다면 이제는 다른 사람한테 보여줄 수 있는 상태에 가까워졌다.
배포 준비를 해볼 때가 된 것 같다.